<template>
  <div>
    <div style="display: flex; justify-content: flex-end;margin: 10px">
      <a-button type="primary" @click="back(null)">返回上一级</a-button>
    </div>

    <!-- 搜索弹框 -->

    <a-form :form="formData">
      <a-form-item
        label="文章语言"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-select
          placeholder="请选择文章语言"
          v-decorator="['language', { initialValue: language }]"
          @change="languageChange"
        >
          <a-select-option value="1">简体中文</a-select-option>
          <a-select-option value="2">繁体</a-select-option>
          <a-select-option value="3">英语</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="模块分类"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-select
          placeholder="请选择模块分类"
          v-decorator="['categoryType', { initialValue: categoryType }]"
          @change="typeChange"
        >
          <a-select-option value="1">大湾区概览</a-select-option>
          <a-select-option value="2">政策</a-select-option>
          <a-select-option value="3">资助及优惠</a-select-option>
          <a-select-option value="4">对接及联络</a-select-option>
          <a-select-option value="5">商务支援</a-select-option>
          <a-select-option value="6">活动及培训</a-select-option>
          <a-select-option value="7">香港贸发局</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="内容分类"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-select
          placeholder="请选择内容分类"
          v-decorator="['categoryId', { initialValue: categoryId }]"
          @change="categoryChange"
        >
          <a-select-option
            v-for="c in categoryId"
            :key="c.value"
            :value="c.value"
            >{{ c.text }}</a-select-option
          >
        </a-select>
        <div v-if="this.typeNumber == 5 || this.typeNumber == 6">
          <a-select
            placeholder="请选择内容子分类"
            v-decorator="['categoryChildName']"
          >
            <a-select-option
              v-for="c in categoryChildName"
              :key="c.value"
              :value="c.value"
              >{{ c.text }}</a-select-option
            >
          </a-select>
        </div>
      </a-form-item>
      <a-form-item
        label="地区分类"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-select
          v-decorator="['cityId']"
          mode="multiple"
          :size="size"
          placeholder="请选择地区（可多选）"
          style="width: 200px"
        >
          <a-select-option v-for="c in cityId" :key="c.value">
            {{ c.text }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="行业分类"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-select
          placeholder="请选择行业分类"
          v-decorator="['industryId']"
          @change="industryChange"
        >
          <a-select-option
            v-for="c in industryId"
            :key="c.value"
            :value="c.value"
            >{{ c.text }}</a-select-option
          >
        </a-select>
        <a-select
          v-decorator="['industryChildName']"
          mode="multiple"
          :size="size"
          placeholder="请选择内容子分类"
          style="width: 200px"
        >
          <a-select-option v-for="c in industryChildName" :key="c.value">
            {{ c.text }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="文章标题"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-input v-decorator="['title', { initialValue: title }]"></a-input>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 5, offset: 18 }">
        <a-button style="margin-right: 20px;" @click="cancel()"> 取消</a-button>
        <a-button type="primary" @click="save()"> 搜索</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import api from "@/api/api.js";
import UploadImg from "../../components/uploadImg.vue";
import { quillEditor } from "vue-quill-editor";
import { quillRedefine } from "vue-quill-editor-upload";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  components: {
    UploadImg
  },
  data() {
    return {
      size: "default",
      source: "",
      link: "",
      title: "",
      cityId: [],
      categoryId: [],

      dataTable: [],

      formData: this.$form.createForm(this),
      ategoryList: {
        language: "",
        type: ""
      },
      typeNumber: 0,
      language: "",
      languageName: "",
      categoryType: "",
      categoryChildName: [],
      industryId: [],
      industryChildName: []
    };
  },
  methods: {
    back() {
      this.$router.push("articleList");
    },
    cancel(e) {
      this.$router.push("articleList");
    },
    languageChange(values) {
      this.ategoryList.language = values;
    },
    typeChange(values) {
      this.formData.setFieldsValue({
        categoryId: []
      });
      this.ategoryList.type = values;
      this.typeNumber = values;
      this.categoryId = [];
      api.getCategoryList(this.ategoryList).then(res => {
        if (res.code == 200) {
          res.result.forEach(r => {
            this.categoryId.push({
              value: r.categoryId,
              text: r.categoryName
            });
          });
        }
      });
    },
    industryChange(val) {
      this.formData.setFieldsValue({
        industryChildName: []
      });
      this.industryChildName = [];
      api.getIndustryList({ parentId: val }).then(res => {
        if (res.code == 200) {
          res.result.forEach(r => {
            this.industryChildName.push({
              value: r.industryId,
              text: r.industryName
            });
          });
        }
      });
    },
    categoryChange(val) {
      this.formData.setFieldsValue({
        categoryChildName: []
      });
      this.categoryChildName = [];
      if (this.typeNumber == 5 || this.typeNumber == 6) {
        api.getChildList({ categoryId: val }).then(res => {
          if (res.code == 200) {
            res.result.forEach(r => {
              this.categoryChildName.push({
                value: r.categoryId,
                text: r.categoryName
              });
            });
          }
        });
      }
    },

    save(e) {
      this.formData.validateFields((err, values) => {
        console.info("0000", this.typeNumber);
        if (this.typeNumber == 5 || this.typeNumber == 6) {
          values.categoryId = values.categoryChildName;
        }
        values.industryId = values.industryChildName;
        this.$delete(values, "categoryChildName");
        this.$delete(values, "industryChildName");
        if (!err) {
          api.getArticlePage(values).then(res => {
            if (res.code == 200) {
              this.formData.resetFields();
              this.$router.push({
                path: "articleList",
                query: { params: values }
              });
            }
          });
        }
      });
    }
  },

  created() {
    this.language = undefined;
    this.categoryType = undefined;
    api.getCityList({ language: "" }).then(res => {
      if (res.code == 200) {
        res.result.forEach(r => {
          this.cityId.push({
            value: r.cityId,
            text: r.cityName
          });
        });
      }
    });
    api.getParentIndustryList({ language: "" }).then(res => {
      if (res.code == 200) {
        res.result.forEach(r => {
          this.industryId.push({
            value: r.industryId,
            text: r.industryName
          });
        });
      }
    });
  }
};
</script>

<style lang="scss" scoped="" type="text/css">
.editable-row-operations a {
  margin-right: 8px;
}
.top-btn {
  padding: 10px;
}
.code-img {
  display: block;
  width: 150px;
}
</style>
